<fieldset class="space-y-3">
  <legend class="sr-only">Delivery</legend>

  <div>
    <label
      for="DeliveryStandard"
      class="flex items-center justify-between gap-4 rounded border border-gray-300 bg-white p-3 text-sm font-medium shadow-sm transition-colors hover:bg-gray-50 has-checked:border-blue-600 has-checked:ring-1 has-checked:ring-blue-600 dark:border-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800"
    >
      <p class="text-gray-700 dark:text-gray-200">Standard</p>

      <p class="text-gray-900 dark:text-white">Free</p>

      <input
        type="radio"
        name="DeliveryOption"
        value="DeliveryStandard"
        id="DeliveryStandard"
        class="sr-only"
        checked
      />
    </label>
  </div>

  <div>
    <label
      for="DeliveryPriority"
      class="flex items-center justify-between gap-4 rounded border border-gray-300 bg-white p-3 text-sm font-medium shadow-sm transition-colors hover:bg-gray-50 has-checked:border-blue-600 has-checked:ring-1 has-checked:ring-blue-600 dark:border-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800"
    >
      <p class="text-gray-700 dark:text-gray-200">Next Day</p>

      <p class="text-gray-900 dark:text-white">£9.99</p>

      <input
        type="radio"
        name="DeliveryOption"
        value="DeliveryPriority"
        id="DeliveryPriority"
        class="sr-only"
      />
    </label>
  </div>
</fieldset>
